<template>
    <div>
        <div >
             <div class="ren_qi">人气推荐&nbsp;&nbsp;&nbsp;></div>
             <div class="box">
                 <div class="con" v-for="(item, index) in tuijian" :key="index">
                 <div class="con_inner">
                     <img :src="item.pic" alt="">
                     <span class="s1">{{item.title}}</span>
                     <span class="s2">{{item.descript}}</span>
                     <span class="s3">￥{{item.commentNumber}}</span>
                 </div>
             </div>
             </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tuijian:{}
        }
    },
    mounted() {
        this.$APIClient.Popular().then((res)=>{
            console.log(res);
            this.tuijian=res.data.data;
        })
    },
}
</script>
<style scoped>
.box{
    display: flex;
    /* justify-content: space-around; */
    flex-flow: wrap row;
}
.ren_qi{
    width: 100%;
    height: 20px;
    color: rgba(0, 0, 0, 0.79);
  margin-top: 10px;
  line-height: 20px;
  text-align: center;
  /* border: 1px solid #000; */
}
    .con{
        width: 48%;
        height: 280px;
        /* border: 1px solid #000; */
        display: flex;
        justify-content: space-around;
        flex-flow: row nowrap;
    }
    .con_inner{
        width: 90%;
        /* border: 1px solid #000; */
        height: 120px;
        
    }
    .con_inner img{
        width: 100%;
        height: 120px;
    }
    .s1{
        font-size: 13px;
    }
    .s2{
        font-size: 9px;
        color: grey;
    }
    .s3{
        color: red;
    }
</style>